<template>
  <div class="container">
    <el-container>
      <el-aside>
        <el-card shadow="hover" class="menu-card">
          <div v-for="(category, index) in categories" :key="index" class="menu-item">
            <div class="category-title">{{ category.name }}</div>
            <div class="category-jobs">
              <span
                  v-for="(job, i) in category.jobs"
                  :key="i"
                  class="job-name"
              >
                {{ job }}
              </span>
            </div>
          </div>
        </el-card>
      </el-aside>
      <el-main>
        <el-container>

          <el-header style="width: 100%; height: 60%">
            <el-image
                style="width: 100%; height: 100%"
                :src="require('@/assets/images/logo/logo.png')"
                fit="cover"
            ></el-image>
          </el-header>

          <el-main style="width: 100%; height: 40%">
            <el-col :span="12" v-for="(card, index) in cards" :key="index">
              <el-card shadow="hover" class="info-card">
                <div class="card-title">{{ card.title }}</div>
                <div class="card-content">{{ card.content }}</div>
              </el-card>
            </el-col>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ["技术总监", "架构师", "运维总监", "技术合伙人", "Java", "数据架构师"],
      categories: [
        {
          name: "互联网/AI",
          jobs: ["技术经理", "技术总监", "架构师"],
        },
        {
          name: "电子/电气通信",
          jobs: ["电子工程师", "硬件工程师"],
        },
        {
          name: "产品",
          jobs: ["产品经理", "产品专员/助理"],
        },
        {
          name: "客服运营",
          jobs: ["客服主管", "客服专员"],
        },
        {
          name: "销售",
          jobs: ["销售专员", "电话销售", "网络销售"],
        },
      ],
      cards: [
        { title: "写好简历 找好工作", content: "免费设计 海量模板 智能润色" },
        { title: "算法解决一切", content: "算法工程师职位精选" },
        { title: "前端有“钱”途", content: "Web前端工程师岗位热推" },
        { title: "物流招聘专区", content: "物流配送 技术支持" },
      ],
    };
  },
};
</script>

<style scoped>
.container {
  width: 1000px; /* 设置固定宽度 */
  height: 527px; /* 设置固定高度 */
  padding: 20px;
  background-color: #f5f7fa;
  overflow: hidden; /* 防止溢出 */
}

.el-container {
  height: 100%;
}

.menu-card {
  padding: 20px;
}

.menu-item {
  margin-bottom: 15px;
}

.category-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.category-jobs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.job-name {
  padding: 5px 10px;
  background-color: #eef1f6;
  border-radius: 4px;
  cursor: pointer;
}

.info-card {
  background-color: #fff;
  text-align: center;
}

.card-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.card-content {
  color: #909399;
  font-size: 14px;
}
</style>
